<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	
	/* //.是class #是id */
.box{
width:400px ;
height: 400px;
position: relative;
background:RoyalBlue;
}
.move{
width: 50px;
height: 50px;
position: absolute;
background-color:LimeGreen;
}
</style>
</head>
<body>

<button onclick="onmove()">点击我</button>

<!-- <div id="box"> -->
<div id="box1" class="box">
		
<!-- <div class="move"></div -->
<div  id="move2" class="move"></div>
</div>

<script>
	
	//添加点击事件 出现鬼畜
	var move=document.querySelector('.move');
	function onmove(){
			var id=setInterval(movebox,10);
			var i=1;// 这里指小方块在上面区间
			function movebox(){
				//添加停止鬼畜事件
				if(i==150){//i=? 等于 小红块向下游动的区间 150=正中间
					clearInterval(id)
				}else{
					i++;
					move.style.left=i+"px";
					move.style.top=i+"px";
				}
				// i++;
				// move.style.left=i+"px";
				// move.style.top=i+"px";
	}
}
	
	
	
	
	
	
	// //小方块跑出去了
	// var move=document.querySelector('.move');
	// var id=setInterval(movebox,10);
	// var i=0;
	// function movebox(){
	// 	i++;
	// 	move.style.left=i+"px";
	// 	move.style.top=i+"px";
	// }
	
	
	// var move=document.querySelector('#box');
	// // var move=document.querySelector('.move');//querySelector是选择器的意思
	// console.log(move);//获取到move的元素
	
	// var move=document.querySelector('#box');
	// // var move=document.querySelector('.move');//querySelector是选择器的意思
	// console.log(move);//获取到move的元素
	
	
	// // var move=document.getElementById('...')

</script>
</body>
</html>
